<template>
	<div class="wrapper">
		<div class="content">
			<p class="head">防返贫监测系统</p >
			<div>
				<div style="display: flex; justify-content: center; align-items: center;">
				  <heart></heart>
				  <h1 style="margin-left: 25px;" class="title">注册</h1>
				</div>
				<el-form ref="formObj" :model="regform" :rules="rules" style="margin-top: 50px;padding: 0 70px ; ">
					<el-form-item prop="name">
						<el-input maxlength="20" :prefix-icon="User" v-model="regform.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item prop="phone">
						<el-input maxlength="15" :prefix-icon="Iphone" v-model="regform.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item prop="email">
						<el-input maxlength="64" :prefix-icon="Message" v-model="regform.email" placeholder="请输入电子邮箱"></el-input>
					</el-form-item>
					<el-form-item prop="code">
						<el-input maxlength="6" :prefix-icon="ChatDotSquare" v-model="regform.code" style="width: 348px; margin-right: 10px;" placeholder="请输入验证码" @click="send"></el-input>
						<el-button :disabled="isCountingDown" type="danger" plain @click="sendCode" style="width: 100px;">
						{{ isCountingDown ? `${countdown}s后再发送` : '发送验证码' }}
						</el-button>
					</el-form-item>
					<el-form-item prop="password">
						<el-input :prefix-icon="Lock" v-model="regform.password" placeholder="请输入密码" show-password></el-input>
					</el-form-item>
					<el-form-item prop="repass">
						<el-input :prefix-icon="Check" v-model="regform.repass" placeholder="请确认密码" show-password></el-input>
					</el-form-item>
					<el-form-item >
						<el-button style="width: 150px;" plain type="danger" @click="$router.push('/')">返回登录</el-button>
						<el-button style="width: 150px;position: absolute; right: 0;"  plain type="danger" @click="register">注册</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup>
import heart from '@/components/icons/heart'
import { User,Iphone,Message,Lock,Check,ChatDotSquare } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref,reactive } from 'vue'
import { get,post } from '@/axios'
import { _axios } from '@/axios'
import router from '@/router'
const regform=reactive({
	name:'',
	sex:'2',
	idcard:'',
	phone:'',
	email:'',
	code:'',
	password:'',
	repass:'',
	areaId:'-1'
})
const formObj = ref()
function check (rule, value, callback) {
	get("/admin/check",{id:null,value,field: rule.field },content => {
		if(content){
			callback()
		}else{
			callback(new Error())
		}
	})
}
const rules = reactive({
	name:[
		{ required:true, message: '请输入姓名', trigger:'blur' }
	],
	phone:[
		{ required:true, message: '请输入手机号', trigger:'blur' },
		{ pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的中国手机号', trigger: 'blur' },
		{ validator: check, message: '该手机号已经被使用', trigger: 'blur' }
	],
	email:[
		{ required:true, message: '请输入电子邮箱', trigger:'blur' },
		{ type: 'email', message: '请输入正确的电子邮箱', trigger: 'blur' },
		{ validator: check, message: '该电子邮箱已经被使用', trigger: 'blur' }
	],
	code:[
		{ required:true, message: '请输入验证码', trigger:'blur' }
	],
	password:[
		{ required:true, message: '请输入密码', trigger:'blur' }
	],
	repass:[
		{ required:true, message: '请再次输入密码', trigger:'blur' }
	],
})

const countdown = ref(60)  // 倒计时秒数
const isCountingDown = ref(false)  // 是否正在倒计时
function sendCode () {
	formObj.value.validateField(['name', 'phone', 'email'],valid => {
		if(valid){
			post("/admin/sendCode",{email:regform.email},content => {
				ElMessage({
					message:'验证码已发送',
					type:'success'
				})
				startCountdown()
			})
		}else{
			ElMessage({
				message:'验证失败，请检查个人信息',
				type:'error'
			})
		}
	})
}
function startCountdown() {
	isCountingDown.value = true
	countdown.value = 60
	const timer = setInterval(() => {
		countdown.value -= 1
		if(countdown.value <= 0){
			clearInterval(timer)
			isCountingDown.value = false
		}
	},1000)
}
function register(){
	formObj.value.validate(valid => {
		if(valid){
			post('/admin/checkCode',{ email:regform.email,code:regform.code },content => {
				if(content){
					if(regform.password === regform.repass){
						const formData = new FormData()
						for(const key in regform){
							if(key !== "code" && key !== "repass" ){
								formData.append(key,regform[key])
							}
						}
						_axios.request({
							url: '/admin/register',
							method: 'post',
							data: formData
						}).then(response => {
							ElMessage({
								message:'注册成功',
								type:'success'
							})
							router.push({
								path:'/'
							})
						})
					}else{
						ElMessage({
							message:'两次密码输入必须一致',
							type:'error'
						})
					}
				}else{
					ElMessage({
						message:'验证码输入错误',
						type:'error'
					})
				}
			})
		}else{
			ElMessage({
				message:'注册失败，请检查个人信息',
				type:'error'
			})
		}
	})
}
</script>

<style scoped lang="scss">
	.wrapper{
		width: 100%;
		height: 100vh;
		background-size: 100% 100vh;
		background-image: url("../../assets/new.jpg");
		display: flex;
		.content{
			width: 600px;
			height: 600px;
			margin: auto;
		    box-shadow: 9px 7px 20px 7px #ff877c;
			border-radius: 10px;
			.head{
				height: 90px;
				font-size: 50px;
				font-weight: bold;
				color: #fff;
				margin-left: 65px;
				letter-spacing: 20px;
			}
			::v-deep .el-form-item__content {
				.el-form-item__error {
					color: #ffffff;
				}
			}
		}
		.title{
			text-align: center;
			margin-top: 20px;
			letter-spacing: 1.5rem;
			color: #fff;
		}
	}
</style>
